<template>
    <div class="goods">
      <el-row>
        <el-col :span="6">
          <div class="menu-wrapper1" ref="menuWrapper1">
            <ul>
              <!-- current -->
              <li class="menu-item">
                <span class="text">
                  <img
                    class="icon"
                    src="https://fuss10.elemecdn.com/0/6a/05b267f338acfeb8bd682d16e836dpng.png"
                  />
                  折扣
                </span>
              </li>
              <li class="menu-item">
                <span class="text">
                  <img
                    class="icon"
                    src="https://fuss10.elemecdn.com/b/91/8cf4f67e0e8223931cd595dc932fepng.png"
                  />
                  <a href="#test"> 优惠</a>
                 
                </span>
              </li>
               <li class="menu-item">
                <span class="text" @click="tiaozhuan" id='tang'>
                  <img
                    class="icon"
                    src="https://fuss10.elemecdn.com/0/6a/05b267f338acfeb8bd682d16e836dpng.png"
                  />
                  汤
                </span>
              </li>
               <li class="menu-item">
                <span class="text">
                  <img
                    class="icon"
                    src="https://fuss10.elemecdn.com/0/6a/05b267f338acfeb8bd682d16e836dpng.png"
                  />
                  肉
                </span>
              </li>
               <li class="menu-item">
                <span class="text">
                  <img
                    class="icon"
                    src="https://fuss10.elemecdn.com/0/6a/05b267f338acfeb8bd682d16e836dpng.png"
                  />
                  主食
                </span>
              </li>
               <li class="menu-item">
                <span class="text">
                  <img
                    class="icon"
                    src="https://fuss10.elemecdn.com/0/6a/05b267f338acfeb8bd682d16e836dpng.png"
                  />
                  特价
                </span>
              </li>
               <li class="menu-item">
                <span class="text">
                  <img
                    class="icon"
                    src="https://fuss10.elemecdn.com/0/6a/05b267f338acfeb8bd682d16e836dpng.png"
                  />
                  好评
                </span>
              </li>
               <li class="menu-item">
                <span class="text">
                  热销
                </span>
              </li>
               <li class="menu-item">
                <span class="text">
                  餐具
                </span>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="foods-wrapper" ref="foodsWrapper">
            <ul>
              <li class="food-list" id="testli">
                <h1 class="title">折扣</h1>
                <ul>
                  <li class="food-item">
                    <div class="icon">
                      <img
                        src="http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageVi ew2/1/w/114/h/114"
                      />
                    </div>
                    <div class="content">
                      <div class="head">
                        <span class="name">南瓜粥</span>
                        <span class="tip">(甜粥)</span>
                      </div>
                      <div class="extra">
                        <span class="count"> 月售 91 份 </span>
                        <span> 好评率 100% </span>
                      </div>
                      <div class="price">
                        <span class="now"> ￥9 &nbsp;&nbsp;&nbsp;</span>
                        <span class="old"> ￥19 </span>
                      </div>
                      <!-- <div class="cartcontrol-wrapper">CartControl</div> -->
                    </div>
                  </li>
                  <li class="food-item">
                    <div class="icon">
                      <img
                        src="http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageVi ew2/1/w/114/h/114"
                      />
                    </div>
                    <div class="content">
                      <div class="head">
                        <span class="name">南瓜粥</span>
                        <span class="tip">(甜粥)</span>
                      </div>
                      <div class="extra">
                        <span class="count"> 月售 91 份 </span>
                        <span> 好评率 100% </span>
                      </div>
                      <div class="price">
                        <span class="now"> ￥9 &nbsp;&nbsp;&nbsp;</span>
                      </div>
                      <!-- <div class="cartcontrol-wrapper">CartControl</div> -->
                    </div>
                  </li>
                  <li class="food-item">
                    <div class="icon">
                      <img
                        src="http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageVi ew2/1/w/114/h/114"
                      />
                    </div>
                    <div class="content">
                      <div class="head">
                        <span class="name">南瓜粥</span>
                        <span class="tip">(甜粥)</span>
                      </div>
                      <div class="extra">
                        <span class="count"> 月售 91 份 </span>
                        <span> 好评率 100% </span>
                      </div>
                      <div class="price">
                        <span class="now"> ￥9 &nbsp;&nbsp;&nbsp;</span>
                        <span class="old"> ￥19 </span>
                      </div>
                      <!-- <div class="cartcontrol-wrapper">CartControl</div> -->
                    </div>
                  </li>
                  <li class="food-item">
                    <div class="icon">
                      <img
                        src="http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageVi ew2/1/w/114/h/114"
                      />
                    </div>
                    <div class="content">
                      <div class="head">
                        <span class="name">南瓜粥</span>
                        <span class="tip">(甜粥)</span>
                      </div>
                      <div class="extra">
                        <span class="count"> 月售 91 份 </span>
                        <span> 好评率 100% </span>
                      </div>
                      <div class="price">
                        <span class="now"> ￥9 &nbsp;&nbsp;&nbsp;</span>
                      </div>
                      <!-- <div class="cartcontrol-wrapper">CartControl</div> -->
                    </div>
                  </li>
                </ul>
              </li>
              <!-- food-list-hook -->
              <li class="food-list">
                <h1 class="title" id = 'test'>优惠</h1>
                <ul>
                  <li class="food-item">
                    <div class="icon">
                      <img
                        src="http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageVi ew2/1/w/114/h/114"
                      />
                    </div>
                    <div class="content">
                       <div class="head">
                        <span class="name">红枣山药粥</span>
                        <span class="tip">(红枣山药糙米粥,素材包)</span>
                      </div>
                      <div class="extra">
                        <span class="count"> 月售 17 份 </span>
                        <span> 好评率 100% </span>
                      </div>
                      <div class="price">
                        <span class="now"> ￥29&nbsp;&nbsp;&nbsp; </span>
                        <span class="old"> ￥36 </span>
                      </div>
                      <!-- <div class="cartcontrol-wrapper">CartControl</div> -->
                    </div>
                  </li>
                </ul>
              </li>
              <li class="food-list" id="tang1">
                <h1 class="title">折扣</h1>
                <ul>
                  <li class="food-item">
                    <div class="icon">
                      <img
                        src="http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageVi ew2/1/w/114/h/114"
                      />
                    </div>
                    <div class="content">
                      <div class="head">
                        <span class="name">南瓜粥</span>
                        <span class="tip">(甜粥)</span>
                      </div>
                      <div class="extra">
                        <span class="count"> 月售 91 份 </span>
                        <span> 好评率 100% </span>
                      </div>
                      <div class="price">
                        <span class="now"> ￥9 &nbsp;&nbsp;&nbsp;</span>
                        <span class="old"> ￥19 </span>
                      </div>
                      <!-- <div class="cartcontrol-wrapper">CartControl</div> -->
                    </div>
                  </li>
                  <li class="food-item">
                    <div class="icon">
                      <img
                        src="http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageVi ew2/1/w/114/h/114"
                      />
                    </div>
                    <div class="content">
                      <div class="head">
                        <span class="name">南瓜粥</span>
                        <span class="tip">(甜粥)</span>
                      </div>
                      <div class="extra">
                        <span class="count"> 月售 91 份 </span>
                        <span> 好评率 100% </span>
                      </div>
                      <div class="price">
                        <span class="now"> ￥9 &nbsp;&nbsp;&nbsp;</span>
                      </div>
                      <!-- <div class="cartcontrol-wrapper">CartControl</div> -->
                    </div>
                  </li>
                  <li class="food-item">
                    <div class="icon">
                      <img
                        src="http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageVi ew2/1/w/114/h/114"
                      />
                    </div>
                    <div class="content">
                      <div class="head">
                        <span class="name">南瓜粥</span>
                        <span class="tip">(甜粥)</span>
                      </div>
                      <div class="extra">
                        <span class="count"> 月售 91 份 </span>
                        <span> 好评率 100% </span>
                      </div>
                      <div class="price">
                        <span class="now"> ￥9 &nbsp;&nbsp;&nbsp;</span>
                        <span class="old"> ￥19 </span>
                      </div>
                      <!-- <div class="cartcontrol-wrapper">CartControl</div> -->
                    </div>
                  </li>
                  <li class="food-item">
                    <div class="icon">
                      <img
                        src="http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageVi ew2/1/w/114/h/114"
                      />
                    </div>
                    <div class="content">
                      <div class="head">
                        <span class="name">南瓜粥</span>
                        <span class="tip">(甜粥)</span>
                      </div>
                      <div class="extra">
                        <span class="count"> 月售 91 份 </span>
                        <span> 好评率 100% </span>
                      </div>
                      <div class="price">
                        <span class="now"> ￥9 &nbsp;&nbsp;&nbsp;</span>
                      </div>
                      <!-- <div class="cartcontrol-wrapper">CartControl</div> -->
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
</template>
<script>
import BetterScroll from 'better-scroll'
import {mapActions,mapState} from 'vuex'
export default {
  name: "ShopGoodsTest",
  mounted() {
    //this.getH()
  },
  methods: {
    tiaozhuan: function (event) {
      let targetId = event.currentTarget.id + 1
      let target = document.getElementById(targetId).offsetTop
      console.log('这是位置',target)
      this.$refs.foodsWrapper.scrollTo(0,target)
      
    },

  },
 /*  mounted() {
    this.getGoods()
    console.log('这是',this.goods)
  },
  methods: {
    ...mapActions(['GetGoods'])
  },
  computed: {
    ...mapState(['goods'])
  }, */
};
</script>
<style lang="less" scoped>
.goods {
  background: #f3f5f7;
  /* height: calc(100% - 201px);
  overflow: scroll; */
  .menu-wrapper1 {
     height: calc(100vh - 201px);
     overflow:scroll;
    border-right: cornsilk 1px solid;
    .menu-item {
      height: 50px;
      border-bottom: solid 1px red;
      line-height: 50px;
      .text {
        display: block;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        .icon {
          width: 12px;
          height: 12px;
          margin: 0 5px;
        }
      }
    }
    .current {
      background-color: white;
      color: tomato;
    }
  }
  .foods-wrapper {
    height: calc(100vh - 201px);
    overflow:scroll;
    .food-list {
      .title {
        padding-left: 10px;
        height: 25px;
        line-height: 25px;
        font-size: 16px;
        color: rgb(147, 153, 159);
      }
      .food-item{
        display: flex;
        padding: 18px;
        padding-left: 10px;
        background-color: white;
        border-bottom: red 1px solid;
        &:first-child{
          border-top-left-radius: 3px;
          border-top-right-radius: 3px;
        }
        &:last-child{
          border-bottom: none;
          border-radius: 3px;
        }
        .icon{
          img{
            width:57px;
            height:57px;
          }
        }
        .content{
          height: 57px;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          margin-left: 8px;
          .head{
            flex:1;
            font-size: 14px;
            display: flex;
            align-items: center;
            .tip{
              font-size: 12px;
            }
          }
          .extra{
            flex:1;
            font-size: 10px;
            color: rgb(147, 153, 159);
            display: flex;
            align-items: center;
            .count{
              margin-right: 10px;
            }
          }
          .price{
            flex:1;
            font-size: 10px;
            display: flex;
            align-items: center;
            .now{
              font-size: 13px;
              color: red;
            }
            .old{
              color: rgb(147, 153, 159);
              text-decoration-line:line-through
            }
          }
        }
      }
    }
  }
}
</style>
